var dom = require('dom');
var Element = require('./element');

var PICTURES = [];

function Picture(src, opts) {
  Element.call(this);

  opts = opts || {};

  this.src = src;
  this.x = opts.x || 0;
  this.y = opts.y || 0;
  this.width = opts.width || 300;
  this.height = opts.height || 300;
  this.imgWidth = 0;
  this.imgHeight = 0;
  this.ready = false;

  this.img = null;
  this.el = document.createElement('div');

  dom(this.el).css({
    'position': 'absolute',
    'overflow': 'hidden'
  });

  this.types = [
    'original',
    'fitOne',
    'fitWidth',
    'fitHeight',
    'fitBoth',
    'fitBottom',
    'fitTop',
    'fitRight',
    'fitLeft',
    'autoWidth',
    'autoHeight'
  ];

  this.type = 'fitBoth';
  this.loadImg();
}

Picture.prototype = new Element();

Picture.prototype.loadImg = function() {
  var src = this.src;
  if (PICTURES[src]) {
    this.img = PICTURES[src];
    dom(this.el).append(this.img);
    if (this.img.getAttribute('loaded')) {
      this.imgHeight = this.img.height;
      this.imgWidth = this.img.width;
      this.ready = true;
      this.emit('load');
      this.render();
    } else {
      var self = this;
      this.img.addEventListener('load', function() {
        self.imgHeight = this.height;
        self.imgWidth = this.width;
        self.ready = true;
        self.emit('load');
        self.render();
      });
    }
  } else {
    var img = document.createElement('img');
    dom(this.el).append(img);
    dom(img).css({
      'position': 'absolute'
    });
    img.src = src;
    PICTURES[src] = img;
    var self = this;
    img.addEventListener('load', function() {
      self.imgHeight = this.height;
      self.imgWidth = this.width;
      this.setAttribute('loaded', true);
      self.ready = true;
      self.emit('load');
      self.render();
    });
    this.img = img;
  }
};

Picture.prototype.render = function() {
  dom(this.el).css({
    'top': this.y + 'px',
    'left': this.x + 'px',
    'width': this.width,
    'height': this.height
  });
  this['render_' + this.type]();
};

Picture.prototype.applyToImg = function(x, y, w, h) {
  dom(this.img).css({
    'top': y + 'px',
    'left': x + 'px',
    'width': w + 'px',
    'height': h + 'px'
  });
};

Picture.prototype.render_original = function() {
  var x = (this.width - this.imgWidth) / 2;
  var y = (this.height - this.imgHeight) / 2;
  dom(this.img).css({
    'top': y + 'px',
    'left': x + 'px'
  });
};

Picture.prototype.render_fitOne = function() {
  var tan = this.imgWidth / this.imgHeight;
  var w = this.height * tan;
  var h;
  if (w >= this.width) {
    w = this.width;
    h = this.w / tan;
  } else {
    h = this.height;
  }
  var x = (this.width - w) / 2;
  var y = (this.height - h) / 2;
  this.applyToImg(x, y, w, h);
};

Picture.prototype.render_fitWidth = function() {
  var tan = this.imgWidth / this.imgHeight;
  var w = this.width;
  var h = w / tan;
  var x = 0;
  var y = (this.height - h) / 2;
  this.applyToImg(x, y, w, h);
};

Picture.prototype.render_fitHeight = function() {
  var tan = this.imgWidth / this.imgHeight;
  var h = this.height;
  var w = h * tan;
  var x = (this.width - w) / 2;
  var y = 0;
  this.applyToImg(x, y, w, h);
};

Picture.prototype.getRealBound = function() {
  var tan = this.imgWidth / this.imgHeight;
  var w = this.height * tan;
  var h;
  if (w >= this.width) {
    h = this.height;
  } else {
    w = this.width;
    h = w / tan;
  }
  return {
    width: w,
    height: h
  };
};

Picture.prototype.render_fitBoth = function() {
  var rb = this.getRealBound();
  var x = (this.width - rb.width) / 2;
  var y = (this.height - rb.height) / 2;
  this.applyToImg(x, y, rb.width, rb.height);
};

Picture.prototype.render_fitBottom = function() {
  var rb = this.getRealBound();
  var x = (this.width - rb.width) / 2;
  var y = this.height - rb.height;
  this.applyToImg(x, y, rb.width, rb.height);
};

Picture.prototype.render_fitTop = function() {
  var rb = this.getRealBound();
  var x = (this.width - rb.width) / 2;
  var y = 0;
  this.applyToImg(x, y, rb.width, rb.height);
};

Picture.prototype.render_fitRight = function() {
  var rb = this.getRealBound();
  var x = this.width - rb.width;
  var y = (this.height - rb.height) / 2;
  this.applyToImg(x, y, rb.width, rb.height);
};

Picture.prototype.render_fitLeft = function() {
  var rb = this.getRealBound();
  var x = 0;
  var y = (this.height - rb.height) / 2;
  this.applyToImg(x, y, rb.width, rb.height);
};

Picture.prototype.render_autoWidth = function() {
  var w = this.imgWidth * this.height / this.imgHeight;
  if (this.width !== w) {
    this.width = w;
    this.render();
  } else {
    this.applyToImg(0, 0, this.width, this.height);
  }
};

Picture.prototype.render_autoHeight = function() {
  var h = this.imgHeight * this.width / this.imgWidth;
  if (this.height !== h) {
    this.height = h;
    this.render();
  } else {
    this.applyToImg(0, 0, this.width, this.height);
  }
};

module.exports = Picture;
